<template>
  <svg
    viewBox="0 0 340 100"
    preserveAspectRatio="xMidYMid meet"
    xmlns="http://www.w3.org/2000/svg"
  >
    <!-- 定义渐变和滤镜 -->
    <defs>
      <!-- 添加背景渐变 -->
      <linearGradient id="backgroundGradient" x1="0%" y1="0%" x2="100%" y2="100%">
        <stop offset="0%" stop-color="#FFFFFF" />
        <stop offset="100%" stop-color="#F0F7FF" />
      </linearGradient>

      <!-- Vue部分渐变 -->
      <linearGradient id="vueGradient" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" stop-color="#41B883" />
        <stop offset="100%" stop-color="#35495E" />
      </linearGradient>

      <!-- AMAP部分渐变 -->
      <linearGradient id="amapGradient" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" stop-color="#1D9BF0" />
        <stop offset="100%" stop-color="#0A66C2" />
      </linearGradient>

      <!-- Pro部分渐变 -->
      <linearGradient id="proGradient" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" stop-color="#FFB547" />
        <stop offset="100%" stop-color="#F58025" />
      </linearGradient>

      <!-- 地图标记主体渐变 - 增强立体感 -->
      <linearGradient
        id="markerMainGradient"
        x1="0%" y1="0%" x2="100%" y2="100%"
      >
        <stop offset="0%" stop-color="#2EAAFF" />
        <stop offset="50%" stop-color="#1D9BF0" />
        <stop offset="100%" stop-color="#0A66C2" />
      </linearGradient>

      <!-- 地图标记侧边渐变 -->
      <linearGradient id="markerSideGradient" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" stop-color="#0A66C2" />
        <stop offset="100%" stop-color="#074A91" />
      </linearGradient>

      <!-- 立体阴影滤镜 -->
      <filter id="deepShadow" x="-40%" y="-40%" width="180%" height="180%">
        <feDropShadow
          dx="4"
          dy="4"
          stdDeviation="6"
          flood-color="rgba(0,0,0,0.35)"
        />
      </filter>

      <!-- 次级阴影滤镜 -->
      <filter id="mediumShadow" x="-30%" y="-30%" width="160%" height="160%">
        <feDropShadow
          dx="2"
          dy="2"
          stdDeviation="3"
          flood-color="rgba(0,0,0,0.25)"
        />
      </filter>

      <!-- 文字立体感滤镜 -->
      <filter id="textShadow" x="-20%" y="-20%" width="140%" height="140%">
        <feDropShadow
          dx="1"
          dy="1"
          stdDeviation="1.5"
          flood-color="rgba(0,0,0,0.3)"
        />
      </filter>

      <!-- 地图标记高光 - 多个角度 -->
      <linearGradient id="markerHighlight1" x1="0%" y1="0%" x2="100%" y2="100%">
        <stop offset="0%" stop-color="rgba(255,255,255,0.8)" />
        <stop offset="60%" stop-color="rgba(255,255,255,0)" />
      </linearGradient>

      <linearGradient id="markerHighlight2" x1="30%" y1="0%" x2="70%" y2="100%">
        <stop offset="0%" stop-color="rgba(255,255,255,0.6)" />
        <stop offset="50%" stop-color="rgba(255,255,255,0)" />
      </linearGradient>

      <!-- 标记中心高光 -->
      <radialGradient id="dotHighlight" cx="50%" cy="30%" r="50%">
        <stop offset="0%" stop-color="rgba(255,255,255,1)" />
        <stop offset="70%" stop-color="rgba(255,255,255,0.6)" />
        <stop offset="100%" stop-color="rgba(255,255,255,0)" />
      </radialGradient>
    </defs>

    <!-- 添加背景矩形 -->
    <rect x="0" y="0" width="340" height="100" fill="url(#backgroundGradient)" />

    <!-- 背景装饰圆环 - 增强深度感 -->
    <circle
      cx="50"
      cy="50"
      r="32"
      fill="none"
      stroke="#E8F3FF"
      stroke-width="1"
      opacity="0.7"
    />
    <circle
      cx="50"
      cy="50"
      r="37"
      fill="none"
      stroke="#E8F3FF"
      stroke-width="1"
      opacity="0.4"
    />
    <circle
      cx="50"
      cy="50"
      r="42"
      fill="none"
      stroke="#E8F3FF"
      stroke-width="1"
      opacity="0.2"
    />

    <!-- 地图标记 - 增强立体感 -->
    <!-- 最深层阴影 - 创建厚重感 -->
    <path
      d="M50 38 L64 65 L50 55 L36 65 Z"
      fill="rgba(0,0,0,0.2)"
      transform="translate(2,2)"
    />

    <!-- 标记侧边 - 创造厚度 -->
    <path
      d="M50 55 L64 65 L50 38 Z"
      fill="url(#markerSideGradient)"
      filter="url(#mediumShadow)"
    />

    <!-- 标记主体 -->
    <path
      d="M50 35 L62 62 L50 52 L38 62 Z"
      fill="url(#markerMainGradient)"
      filter="url(#deepShadow)"
    />

    <!-- 标记高光 - 多角度 -->
    <path
      d="M50 35 L62 62 L50 52 L50 35"
      fill="url(#markerHighlight1)"
      opacity="0.6"
    />
    <path
      d="M50 35 L38 62 L50 52 L50 35"
      fill="url(#markerHighlight2)"
      opacity="0.4"
    />

    <!-- 标记中心圆点 - 增强立体感 -->
    <circle cx="50" cy="45" r="5" fill="white" filter="url(#mediumShadow)" />
    <circle cx="50" cy="45" r="5" fill="url(#dotHighlight)" opacity="0.7" />
    <circle cx="48" cy="43" r="2" fill="rgba(255,255,255,0.9)" />

    <!-- 装饰性地图元素 - 增强主题 -->
    <g transform="translate(30, 30)" opacity="0.2">
      <!-- 简化地图道路 -->
      <path
        d="M5 5 L30 5 L30 30 L5 30 Z"
        fill="none"
        stroke="#333"
        stroke-width="1.5"
      />
      <path d="M17 5 L17 30" fill="none" stroke="#333" stroke-width="1" />
      <path d="M5 17 L30 17" fill="none" stroke="#333" stroke-width="1" />
    </g>

    <!-- 文字：VueAMAP Pro（保持不变） -->
    <text
      x="100"
      y="60"
      font-family="'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
      font-weight="bold"
      font-size="26"
      filter="url(#textShadow)"
    >
      <tspan fill="url(#vueGradient)">Vue</tspan>
      <tspan fill="url(#amapGradient)"> Amap </tspan>
      <tspan fill="url(#proGradient)">Pro</tspan>
    </text>

    <!-- 装饰性曲线元素 -->
    <path
      d="M280 20 C300 15, 310 40, 300 65 C290 90, 260 85, 250 60 C240 35, 260 35, 280 20"
      fill="none"
      stroke="#E8F3FF"
      stroke-width="2"
    />

    <!-- 立体装饰点 -->
    <circle cx="300" cy="65" r="3" fill="#E8F3FF" opacity="0.7" />
    <circle cx="295" cy="60" r="2" fill="#E8F3FF" opacity="0.5" />
    <circle cx="305" cy="70" r="2" fill="#E8F3FF" opacity="0.5" />
  </svg>
</template>
